<!-- comments -->
<section
  class="one-section one-comments-section wt pc-safeTop pc-safeBottom2 wap-safeCol2"
  data-title="comments"
>
  <div class="pc-safeRow wap-safeRow">
    <p class="one-h1">{{ section.settings.title }}</p>
    <div class="one-comments-swiper">
      <div class="swiper-wrapper">
        {%- for block in section.blocks -%}
          <div class="swiper-slide one-comments-swiper-item one-pc-flexCol one-wap-flexCol">
            <div class="one-comments-user one-pc-flexCol one-wap-flexCol">
              <picture class="one-comments-img">
                <img class="cover" src="{{ block.settings.image | img_url: "master" }}" loading="lazy">
              </picture>
              <p class="one-sh1">{{ block.settings.name }}</p>
              <p class="one-comments-content one-b1 pc-ct wap-ct">{{ block.settings.comment }}</p>
            </div>
            <div class="one-comments-starlist one-pc-flexRow one-wap-flexRow">
              {%- for index in (1..5) -%}
                <svg
                  class="one-comments-star {% if index <= block.settings.score %}active{% endif %}"
                  xmlns="http://www.w3.org/2000/svg"
                  width="30"
                  height="29"
                  viewBox="0 0 30 29"
                  fill="none"
                >
                  <path
                      d="M14.999 1L10.5671 9.86566L0.5 11.2963L7.7927 18.2836L6.04944 28L14.999 23.3242L23.9504 28L22.22 18.2836L29.5 11.2963L19.4887 9.86566L14.999 1Z"
                      stroke="#FF9700" stroke-linejoin="round" />
                </svg>
              {%- endfor -%}
            </div>
          </div>
        {%- endfor -%}
      </div>
    </div>
    <div class="one-comments-btn-div one-pc-flexRow one-wap-flexRow">
      <div class="one-comments-pagebtn-list one-pc-flexRow one-wap-flexRow">
        <svg
          class="one-comments-pagebtn left"
          xmlns="http://www.w3.org/2000/svg"
          width="46"
          height="46"
          viewBox="0 0 46 46"
          fill="none"
        >
          <rect width="46" height="46" rx="23" fill="#0060EF" />
          <path d="M26.0273 14.5263L17.5537 22.9999L26.0273 31.4736" stroke="#fff"
              stroke-width="2.42105" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <svg
          class="one-comments-pagebtn right"
          xmlns="http://www.w3.org/2000/svg"
          width="46"
          height="46"
          viewBox="0 0 46 46"
          fill="none"
        >
          <rect width="46" height="46" rx="23" fill="#0060EF" />
          <path d="M26.0273 14.5263L17.5537 22.9999L26.0273 31.4736" stroke="#fff"
              stroke-width="2.42105" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "comments",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "title",
      "default": "User comments"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "label": "image",
          "type": "image_picker",
          "id": "image"
        },
        {
          "type": "text",
          "id": "name",
          "label": "name"
        },
        {
          "type": "text",
          "id": "comment",
          "label": "comment"
        },
        {
          "type": "range",
          "id": "score",
          "min": 1,
          "max": 5,
          "step": 1,
          "default": 5,
          "label": "score"
        }
      ]
    }
  ]
}
{% endschema %}
